<template>
    <div class="wrop flex fdc fg1">
        <h1 class="mb-30">categories</h1>
        <div class="wrop-content pb-30 flex ">
            <div class="wrop-content-left fg1 flex fdc">
                <h4 class="mb-10">Add New Category</h4>
                <el-form :model="form" label-width="120px" :size="size" :label-position="labelPosition">
                    <el-form-item label="Name">
                        <div class="flex fg1 fdc">
                            <el-input v-model="form.Name" />
                            <p class="tishi">The name is how it appears on your site.</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="Slug">
                        <div class="flex fg1 fdc">
                            <el-input v-model="form.SiteAddress" />
                            <p class="tishi">The “slug” is the URL-friendly version of the name. It is usually all
                                lowercase and contains only letters, numbers, and hyphens.</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="Parent Category">
                        <el-select v-model="form.ParentCategory" placeholder="None">
                            <el-option label="父类1" value="e1" />
                            <el-option label="父类2" value="e2" />
                            <el-option label="父类3" value="e3" />
                        </el-select>
                        <div class="flex fg1 fdc">
                            <p class="tishi">
                                Categories, unlike tags, can have a hierarchy. You might have a Jazz category, and under
                                that have children categories for Bebop and Big Band. Totally optional.
                            </p>
                        </div>
                    </el-form-item>
                    <el-form-item label="Description">

                        <div class="flex fg1 fdc">
                            <el-input v-model="form.Description" type="textarea" />
                            <p class="tishi">The description is not prominent by default; however, some themes may show
                                it.</p>
                        </div>
                    </el-form-item>
                    <el-button class="mb-30" type="primary" @click="onSubmit">Add New Categoy</el-button>
                </el-form>
            </div>
            <!-- 表格 -->
            <div class="wrop-content-right pr-15">
                <div class="wrop-content-right-search">
                    <a-input-group compact>
                        <a-input v-model:value="value19" style="width: calc(100% - 200px)" />
                        <a-button type="primary">Search Categories</a-button>
                    </a-input-group>
                </div>
                <a-table :columns="columns" :data-source="dataSource" bordered>
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="['Name', 'Description', 'Slug', 'Conut', 'address'].includes(column.dataIndex)">
                            <div>
                                <a-input v-if="editableData[record.key]"
                                    v-model:value="editableData[record.key][column.dataIndex]" style="margin: -5px 0" />
                                <template v-else>{{ text }}</template>
                            </div>
                        </template>
                        <template v-else-if="column.dataIndex === 'operation'">
                            <div class="editable-row-operations">
                                <span v-if="editableData[record.key]">
                                    <a-typography-link class="mr-10" @click="save(record.key)">Save</a-typography-link>
                                    <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
                                        <a>Cancel</a>
                                    </a-popconfirm>
                                </span>
                                <span v-else>
                                    <!-- <a class="mr-10" @click="edit(record.key)">Edit</a> -->
                                    <a class="mr-10" @click="edit(record.Name, record.key)">Edit</a>
                                    <!-- <a @click="Delete(record.key)">Delete</a> -->
                                    <a-popconfirm v-if="dataSource.length" title="Sure to delete?"
                                        @confirm="onDelete(record.key)">
                                        <a>Delete</a>
                                    </a-popconfirm>
                                </span>
                            </div>
                        </template>
                    </template>
                </a-table>
                <p class="tishi">Deleting a category does not delete the posts in that category. Instead, posts that
                    were only assigned to the deleted category are set to the default category Siemens. The default
                    category cannot be deleted.</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { cloneDeep } from 'lodash-es';
import { reactive, computed, ref } from 'vue'
// 搜索框
const value19 = ref('');
const labelPosition = ref('top')
const size = ref('large')
const form = reactive({
    Name: '',
    Tagline: '',
    ParentCategory: '',
    SiteAddress: '',
    Description: '',
})

const onSubmit = () => {
    console.log('submit!')
}

const handleClick = () => {
    console.log('click')
}
// 表格
const columns = [{
    title: 'Name',
    dataIndex: 'Name',
    width: '25%',
}, {
    title: 'Description',
    dataIndex: 'Description',
    width: '40%',
}, {
    title: 'Slug',
    dataIndex: 'Slug',
    width: '25%',
}, {
    title: 'Conut',
    dataIndex: 'Conut',
}, {
    title: 'operation',
    dataIndex: 'operation',
}];
const data = [];
for (let i = 0; i < 25; i++) {
    data.push({
        key: i.toString(),
        Name: `Siemens ${i}`,
        Description: 'Note: This is the best selling product category',
        Slug: `siemens ${i}`,
        Conut: `${i}`,
        address: `London Park no. ${i}`,
    });
}

const dataSource = ref(data);
const editableData = reactive({});

// 编辑
const edit = (name, key) => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
    //   editableData[name] = cloneDeep(dataSource.value.filter(item => name === item.Name)[0]);
    console.log(name, '编辑');
};

// 删除
const onDelete = key => {
    dataSource.value = dataSource.value.filter(item => item.key !== key);
};

// 保存
const save = key => {
    Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
    delete editableData[key];
};

// 取消
const cancel = key => {
    delete editableData[key];
};

// 表格end

</script>

<style lang="less" scoped>
.wrop {
    padding-bottom: 30px;
    background: #f1f1f1;

    &-content {
        overflow: auto;

        &-left {
            width: 0px;

            &>h4 {
                padding: 10px;
            }

            //表单
            .el-form {
                &-item {
                    padding: 0px 10px 0px 10px;

                    ::v-deep .el-form-item__label {
                        font-weight: bold;
                        color: black;
                        font-size: 15px;
                    }

                    .tishi {
                        font-style: italic;
                        color: rgb(161, 159, 159);
                    }

                    &__content {
                        .el-input--large {
                            ::v-deep {
                                // width: 70%;
                            }
                        }
                    }

                    ::v-deep .el-form-item__label {
                        width: 220px !important;
                    }
                }
            }
        }

        &-right {
            flex-grow: 2;
            height: 100%;
            width: 0px;

            // overflow: auto;
            &-search {
                width: 60%;
                margin-bottom: 15px;
            }

            &>.tishi {
                font-style: italic;
                color: rgb(161, 159, 159);
                font-size: 15px;
                padding: 30px 0;
            }
        }
    }

}

::v-deep .el-form-item {
    margin: 0px !important;
}

::v-deep .el-textarea>.el-textarea__inner {
    // width: 300px;
}

// 滚动条
.wrop-content::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 5px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
}

/* 滚动条上的滚动滑块 */
.wrop-content::-webkit-scrollbar-thumb {
    background-color: #cdcecf;
    border-radius: 32px;
}

// 滚动条end
</style>